<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <el-row>
      <el-col :span="24">
        <el-descriptions class="margin-top" title="" :column="3" :size="size" border>

          <el-descriptions-item>
            <template slot="label">
              网站名称
            </template>
            {{website.name}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              网址
            </template>
            <el-link :href="website.url" target="_blank" type="primary"> {{website.url | ellipsis}}</el-link>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              网站类型
            </template>
            {{website.websiteTypeName}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              录入时间
            </template>
            {{getTime(website.createTime)}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              是否要翻墙
            </template>
            <div v-if="website.overTheWall === 2">
              <el-tag :size="tagSize" type="success">要翻墙</el-tag>
            </div>
            <div v-else>
              <el-tag :size="tagSize" >不需要翻墙</el-tag>
            </div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              点击次数
            </template>
            {{website.numberOfClicks}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              是否常用
            </template>
            <div v-if="website.commonlyUsed === 2">
              <el-tag :size="tagSize" type="success">常用</el-tag>
            </div>
            <div v-else>
              <el-tag :size="tagSize" >不常用</el-tag>
            </div>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              描述
            </template>
            {{website.describe}}
          </el-descriptions-item>

        </el-descriptions>

      </el-col>
    </el-row>


    <span slot="footer" class="dialog-footer">
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>

  import {checkNull, getFullTime} from "../../utils/utils";

  export default {
    name: "WebsiteDetailed",
    data(){
      return {
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '详情',
        },
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 网址
        website: {
          overTheWall: null,
          name: null,
          url: null,
          websiteTypeName: null,
          numberOfClicks: null,
          commonlyUsed: null,
          describe: null,
        },
        // 列表的尺寸
        size: 'small',
        // tag 的大小
        tagSize: 'small',
      }
    },
    /**
     * 过滤器
     */
    filters: {
      /**
       * 数据超过长度显示省略号
       * @param value
       * @return {string|*}
       */
      ellipsis(value) {
        if (!value) return "";
        if (value.length > 40) {
          return value.slice(0, 40) + "......";
        }
        return value;
      }
    },
    methods: {
      /**
       * 打开网站详情
       * @param obj 网站信息
       */
      openWebsiteDetailed(obj){
        this.website = obj
        this.tableConfig.show = true
        this.$store.commit('navigationListChange', ['我的网址', '详情'])
      },
      /**
       * 转换时间戳为时间格式
       */
      getTime(item){
        return getFullTime(item)
      },
    }
  }
</script>

<style scoped>

</style>
